<template>
  <div class="tree-table">
    <el-table
      :data="labelList"
      :row-class-name="rowClassName"
      :row-key="className"
      size="mini"
      border>
      <el-table-column
        label="标签名称"
        class="label-name">
        <template scope="scope">
          <span @click.stop="showLabel(scope.$index, scope.row)" v-show="!scope.row.status">
            <i v-if="!scope.row.flag && scope.row.level !== 3" class="icon iconfont icon-zhankai"></i>
            <i v-if="scope.row.flag && scope.row.level !== 3" class="icon iconfont icon-zuixiaohua"></i>
          </span>
          <span style="margin-left: 10px" v-if="!scope.row.status">{{ scope.row.name }}</span>
          <span v-if="scope.row.status" :class = "{is_error: addBorderFlag==true}">
            <el-input v-model="scope.row.name"
                      style="width: 170px;display:inline-block"></el-input>
            <div style="display: inline-block"><span @click.stop="handleChannel(scope.$index, scope.row)">取消</span><span>保存</span></div>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态">
        <template scope="scope">
          <p>{{ scope.row.keyStr }}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template scope="scope">
          <div v-show="scope.row.name">
            <span @click.stop="handleEdit(scope.$index, scope.row)">编辑</span>
            <span @click.stop="handleAddLabel(scope.$index, scope.row)" v-show="scope.row.level === 1">添加二级标签</span>
            <span @click.stop="handleAddLabel(scope.$index, scope.row)" v-show="scope.row.level === 2">添加三级标签</span>
            <span @click.stop="handleDisabled(scope.$index, scope.row)">停用</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    name: 'treeTable',
    data () {
      return {
        labelList: [],
        maxLevel: 0,
        stopAddFlag: false,
        addBorderFlag: false
      }
    },
    props: ['tableData', 'searchLabelName'],
    watch: {
//     监听输入名称，控制一级标签的显示隐藏
      searchLabelName () {
        this.labelList.forEach((item) => {
          if ((item.level === 1)) {
            document.getElementsByClassName(item.keyStr + '')[0].style.display = 'table-row'
          }
        })
        let nextarray = []
        let KeyStr = []
        nextarray = this.labelList.filter((item) => {
          if (item.name.indexOf(this.searchLabelName) !== -1) {
            return item
          }
        })
        let n = []
        nextarray.forEach((item) => {
          KeyStr.push(item.keyStr.split('-')[0])
        })
        KeyStr.forEach((item) => {
          if (n.indexOf(item) === -1) {
            n.push(item)
          }
        })
        for (var i = 0; i < this.labelList.length; i++) {
          this.maxLevel = this.labelList[i].level > this.maxLevel ? this.labelList[i].level : this.maxLevel
          if (this.labelList[i].level !== 1) {
            document.getElementsByClassName(this.labelList[i].keyStr + '')[0].style.display = 'none'
          }
          this.labelList[i].flag = false
        }
        this.labelList.forEach((item) => {
          if (n.indexOf(item.keyStr) === -1 && (item.level === 1)) {
            document.getElementsByClassName(item.keyStr + '')[0].style.display = 'none'
          }
        })
      }
    },
    methods: {
//      展开
      unfolded (index, row) {
        let nextarray = []
        nextarray = this.labelList.filter((item) => {
          return item.keyStr.length > row.keyStr.length && item.keyStr.indexOf(row.keyStr) !== -1 && item.level === row.level + 1
        })
        nextarray.forEach((label) => {
          document.getElementsByClassName(label.keyStr)[0].style.display = 'table-row'
        })
        row.flag = true
      },
//      收起
      folded (index, row) {
        // 收起下级
        let nextarray = []
        nextarray = this.labelList.filter((item) => {
          return item.keyStr.length > row.keyStr.length && item.keyStr.indexOf(row.keyStr) !== -1
        })
        nextarray.forEach((label) => {
          if (label.level === row.level + 1 && label.level < this.maxLevel) {
            label.flag = false
          }
          document.getElementsByClassName(label.keyStr)[0].style.display = 'none'
        })
        row.flag = false
      },
//      添加一级标签
      handleAddOneLabel () {
        if (this.stopAddFlag) {
          this.addBorderFlag = true
          return
        }
        this.stopAddFlag = true
        let obj = {
          keyStr: '',
          level: 1,
          name: '',
          status: true,
          flag: false
        }
        this.labelList.push(obj)
      },
//      添加二级／三级标签
      handleAddLabel (index, row) {
        if (this.stopAddFlag) {
          this.addBorderFlag = true
          return
        }
        this.stopAddFlag = true
        this.unfolded(index, row)
        let nextarr = []
        nextarr = this.labelList.filter((item) => {
          return item.keyStr.length > row.keyStr.length && item.keyStr.indexOf(row.keyStr) !== -1
        })
        let insertIndex = 0
        let keyStr = []
        if (nextarr.length !== 0) {
          for (let i = 0; i < this.labelList.length; i++) {
            if (nextarr[nextarr.length - 1].keyStr === this.labelList[i].keyStr) {
              insertIndex = i
              keyStr = this.labelList[i].keyStr.split('-')
              break
            }
          }
        } else {
          keyStr = row.keyStr.split('-')
          insertIndex = index
        }
        let obj = {
          keyStr: '',
          level: 2,
          name: '',
          status: true,
          flag: false,
          _id: '',
          type: '',
          enble: true
        }
        if (row.level === 1) {
          obj.keyStr = keyStr.length > 1 ? keyStr[0] + '-' + (parseInt(keyStr[1]) + 1) : keyStr[0] + '-' + 1
        } else if (row.level === 2) {
          obj.keyStr = keyStr.length > 2 ? keyStr[0] + '-' + keyStr[1] + '-' + (parseInt(keyStr[2]) + 1) : keyStr[0] + '-' + keyStr[1] + '-' + 1
        }
        this.labelList.splice(insertIndex + 1, 0, obj)
      },
//      取消操作
      handleChannel (index, row) {
        this.stopAddFlag = false
        this.addBorderFlag = false
        row._id ? row.status = false : this.labelList.splice(index, 1)
      },
      rowClassName ({row, index}) {
        return '' + row.keyStr
      },
//      通过keyStr添加唯一的className
      className (row, index) {
        return '' + row.keyStr
      },
//      展开／收起操作
      showLabel (index, row) {
        let flag = false
        if (row.flag) {
          this.labelList.forEach((item) => {
            if (item._id === '' || item.status === true) {
              if (row.keyStr.split('-').length < item.keyStr.split('-').length) {
                let _data = item.keyStr.substring(0, item.keyStr.lastIndexOf('-'))
                if (_data.indexOf(row.keyStr) !== -1) {
                  flag = true
                }
              }
            }
          })
          if (flag) {
            return
          }
          this.folded(index, row)
        } else {
          this.unfolded(index, row)
        }
      },
//      编辑标签
      handleEdit (index, row) {
        if (this.stopAddFlag) {
          this.addBorderFlag = true
          return
        }
        row.status = true
        this.stopAddFlag = true
        console.log(index, row)
      },
//      停用
      handleDisabled (index, row) {
        console.log(index, row)
      }
    },
    beforeMount () {
      this.labelList = this.tableData
    },
    mounted () {
      for (var i = 0; i < this.labelList.length; i++) {
        this.maxLevel = this.labelList[i].level > this.maxLevel ? this.labelList[i].level : this.maxLevel
        if (this.labelList[i].level !== 1) {
          this.labelList[i].flag = false
          document.getElementsByClassName(this.labelList[i].keyStr + '')[0].style.display = 'none'
          document.getElementsByClassName(this.labelList[i].keyStr + '')[0].className += (' level' + this.labelList[i].level)
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .tree-table
    margin 10px 20px
</style>




















